<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <div class="section">
    <main>
      <header>
        <h1>现代web布局
          <br />
          CSS Grid Layout
        </h1>
        <h2>作者</h2>
      </header>
      <section></section>
      <figure>
        <img src="https://picsum.photos/800/800?random=1" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/800?random=2" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/800?random=3" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/800?random=4" alt="">
      </figure>
    </main>
  </div>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;

  .section {
    width: 50%;
    height: 50%;
    display: grid;
    padding: 1rem;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

    main {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 2fr;
      grid-template-rows: 2fr 1fr 1fr 2fr;

      header,
      section {
        grid-row: 2 / 4;
        padding: 2rem;
        grid-column: 2 / 4;
        text-align: center;
        align-self: center;
        z-index: 2;
        color: #000;
      }
      section {
        background-color: #fff;
        z-index: 1;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        aspect-ratio: 1 / 1;
      }

      header {
        h1 {
          margin: 0;
          font-size: 18px;
        }
        h2 {
          font-size: 12px;
          margin-top: 0.5rem;
        }
      }

      figure {
        margin: 0;
        padding: 0;

        img {
          max-width: 100%;
          height: auto;
          object-fit: cover;
          object-position: center;
          vertical-align: top;
        }


        &:nth-of-type(1) {
          grid-row: 1 / 3;
          grid-column: 1 / 3;
          align-self: end;
        }

        &:nth-of-type(2) {
          grid-row: 1 / 3;
          grid-column: 3 / 5;
          align-self: end;
        }

        &:nth-of-type(3) {
          grid-row: 3 / 5;
          grid-column: 1 / 3;
        }

        &:nth-of-type(4) {
          grid-row: 3 / 5;
          grid-column: 3 / 5;
        }
      }
    }
  }
}
</style>
